<template>
  <div
    id="PersonalData"
    v-loading="loading"
    element-loading-text="加载中"
    element-loading-background="rgba(255, 255, 255, 0.8)"
  >
    <div class="header_info">
      <div class="avatar">
        <img
          v-if="data"
          width="60px" height="60px" alt=""
          :src="`${data.passportAccountInfo.avatar}`">
      </div>
      <div class="right">
        <div class="top_info">
          <span class="top nickname">{{userNickName}}</span>
          <div class="top member" v-if="data">
            <img
              width="22px" alt=""
              :src="data.passportLevel.levelIconUrl"
            >
            <span>{{data.passportLevel.levelName}}</span>
          </div>
          <!--<div class="top qrcode">-->
            <!--<span-->
              <!--class="iconfont comei-qrcode"-->
              <!--@click.stop.prevent="showQrCodeClick"-->
            <!--&gt;-->
            <!--</span>-->
          <!--</div>-->
        </div>
        <div class="creattime_block">
          <span>建档时间：</span><span v-if="data">{{data.createTime}}</span>
        </div>
      </div>
    </div>
    <!-- <div class="handle_btn_block">
      <el-button v-if="!isEditModel" type="warning" @click="isEditModelShift(true)">编辑</el-button>
      <el-button v-if="isEditModel" type="warning" @click="isEditModelShift(false)">完成</el-button>
    </div> -->
    <div class="user_detail_info" v-if="data">
      <!-- 第一行 -->
      <el-row class="detail_row">
        <el-col :span="8">
          <el-row>
            <el-col :span="8" class="item_title">姓名</el-col>
            <el-col :span="16" class="item_content">
              <span v-if="!isEditModel">{{data.passportAccountInfo.fullname}}</span>
              <el-input v-if="isEditModel"
                v-model="inputData.fullname" placeholder="请输入姓名"></el-input>
            </el-col>
          </el-row>
        </el-col>
        <el-col :span="8">
          <el-row>
            <el-col :span="8" class="item_title">
              年龄（周岁）
            </el-col>
            <el-col :span="16" class="item_content">
              <span>{{data.age}}</span>
            </el-col>
          </el-row>
        </el-col>
        <el-col :span="8">
          <el-row>
            <el-col :span="8" class="item_title">手机</el-col>
            <el-col :span="16" class="item_content">
              <span v-if="!isEditModel">{{data.telephone}}</span>
              <el-input v-if="isEditModel" v-model="inputData.telephone" placeholder="请输入手机号"></el-input>
            </el-col>
          </el-row>
        </el-col>
      </el-row>
      <!-- 第二行 -->
      <el-row class="detail_row">
        <el-col :span="8">
          <el-row>
            <el-col :span="8" class="item_title">
              邮箱
            </el-col>
            <el-col :span="16" class="item_content">
              <span v-if="!isEditModel">{{data.email}}</span>
              <el-input v-if="isEditModel" v-model="inputData.email" placeholder="请输入邮箱"></el-input>
            </el-col>
          </el-row>
        </el-col>
        <el-col :span="8">
          <el-row>
            <el-col :span="8">
            </el-col>
            <el-col :span="16">
            </el-col>
          </el-row>
        </el-col>
        <el-col :span="8">
          <el-row>
            <el-col :span="8" class="item_title">生日</el-col>
            <el-col :span="16" class="item_content">
              <span v-if="!isEditModel">{{data.passportAccountInfo.birthday | handleBirthday}}</span>
              <el-date-picker
                v-if="isEditModel"
                v-model="inputData.birthday_mapping"
                type="date"
                placeholder="请选择日期">
              </el-date-picker>
            </el-col>
          </el-row>
        </el-col>
      </el-row>
      <!-- 第三行 -->
      <el-row class="detail_row">
        <el-col :span="8">
          <el-row>
            <el-col :span="8" class="item_title">
              籍贯
            </el-col>
            <el-col :span="16" class="item_content">
              <span v-if="!isEditModel">{{data.nativePlace}}</span>
              <el-select v-if="isEditModel" v-model="inputData.provinces" placeholder="省份">

              </el-select>
              <el-select v-if="isEditModel" v-model="inputData.city" placeholder="城市">

              </el-select>
            </el-col>
          </el-row>
        </el-col>
        <el-col :span="8">
          <el-row>
            <el-col :span="8" class="item_title">婚姻</el-col>
            <el-col :span="16" class="item_content">
              <span>{{data.passportAccountInfo.marriage | handleMarriage}}</span>
              <el-select v-if="isEditModel" v-model="inputData.marriage" placeholder="婚姻状况">
                <el-option label="未婚" value="">2</el-option>
                <el-option label="已婚" value="">1</el-option>
                <el-option label="保密" value="">3</el-option>
              </el-select>
            </el-col>
          </el-row>
        </el-col>
        <el-col :span="8">
          <el-row>
            <el-col :span="8" class="item_title">年收入（￥）</el-col>
            <el-col :span="16" class="item_content">
              <span v-if="!isEditModel">{{data.passportAccountInfo.salary | handleSalary}}</span>
              <el-input
                v-if="isEditModel"
                v-model="inputData.salary"
                placeholder="请输入年收入">
              </el-input>
              <span v-if="isEditModel">万</span>
            </el-col>
          </el-row>
        </el-col>
      </el-row>
      <!-- 第四行 -->
      <el-row class="detail_row">
        <el-col :span="24" class="full_row">
          <div class="full_row_left item_title">居住地</div>
          <div class="full_row_right item_content">
            <span v-if="!isEditModel">{{data.passportAccountInfo.address}}</span>
            <el-input v-if="isEditModel"
              v-model="inputData.address" placeholder="居住地"></el-input>
          </div>
        </el-col>
      </el-row>
      <!-- 第五行 -->
      <el-row class="detail_row" v-for="(item, idx) in data.addressList" :key="idx">
        <el-col :span="24" class="full_row">
          <div class="full_row_left item_title">{{`收货地址${idx + 1}`}}</div>
          <div class="full_row_right item_content">
            <span>{{item.fullAddress}}</span>
          </div>
        </el-col>
      </el-row>
      <!-- 第六行 -->
      <el-row class="detail_row">
        <el-col :span="8">
          <el-row>
            <el-col :span="8">
            </el-col>
            <el-col :span="16">
            </el-col>
          </el-row>
        </el-col>
        <el-col :span="8">
          <el-row>
            <el-col :span="8" class="item_title">爱好</el-col>
            <el-col :span="16" class="item_content">
              <span>{{data.passportAccountInfo.hobbies}}</span>
              <el-input v-if="isEditModel"
                v-model="inputData.hobbies" placeholder="居住地"></el-input>
            </el-col>
          </el-row>
        </el-col>
        <el-col :span="8">
          <el-row>
            <el-col :span="8" class="item_title">渠道</el-col>
            <el-col :span="16" class="item_content">
              {{data.userType | handleUserType}}
            </el-col>
          </el-row>
        </el-col>
      </el-row>
    </div>
  </div>
</template>

<script>
import moment from 'moment'
export default {
  name: 'PersonalData',
  beforeRouteEnter (to, from, next) {
    next(vm => vm.initPage())
  },
  watch: {
    '$route' (to, from) {
      if (to.name === 'user_detail') {
        this.initPage()
      }
    }
  },
  props: ['userNickName', 'data'],
  data () {
    return {
      memberIcon: ['1', '2', '3', '4'],
      loading: false,
      isEditModel: false,
      inputData: {
        accountId: '',
        telephone: '',
        email: '',
        fullname: '',
        birthday_mapping: '', // 生日  时间格式的映射
        birthday: '',
        province: '',
        city: '',
        marriage: '',
        salary: '',
        address: '',
        Hobbies: ''
      }
    }
  },
  filters: {
    handleUserType: (value) => { // 过滤状态显示
      switch (value) {
        case 1:
          return '系统自建'
        case 2:
          return '小程序注册'
        case 3:
          return '直接来院'
        case 4:
          return '员工推荐'
        case 5:
          return '客户推荐'
      }
    },
    handleSalary: (value) => {
      if (value) {
        return `${value}万`
      }
      return ''
    },
    handleBirthday (value) {
      return moment(value).format('YYYY-MM-DD')
    },
    handleMarriage (value) {
      switch (value) {
        case 1:
          return '已婚'
        case 2:
          return '未婚'
        case 3:
          return '保密'
      }
    }
  },
  methods: {
    initPage () {
      this.isEditModel = false
    },
    // showQrCodeClick () { // 显示二维码按钮点击
    // },
    isEditModelShift (flag) {
      if (flag) { // 点击编辑，进入到编辑模式
        this.isEditModel = true
      } else {
        this.isEditModel = false
      }
    }
  }
}
</script>

<style scoped lang="scss">
  $tableBorder: 1px solid #f0f0f0;
  #PersonalData {
    .header_info {
      display: -webkit-flex; /* Safari */
      display: flex;
      align-items: center;
      .avatar {
        margin-right: 20px;
        overflow: hidden;
        img {
          border-radius: 50px;
        }
      }
      .right {
        .top_info {
          display: -webkit-flex; /* Safari */
          display: flex;
          align-items: center;
          color: #3b3a42;
          .top {
            margin-right: 10px;
          }
          .nickname {
            font-size: 16px;
          }
          .member {
            display: -webkit-flex; /* Safari */
            display: flex;
            align-items: center;
            padding: 2px;
            font-size: 12px;
            color: #000;
            img {
              z-index: 10;
            }
            span {
              display: inline-block;
              padding: 2px 6px 2px 8px;
              line-height: 14px;
              border-top-right-radius: 50px;
              border-bottom-right-radius: 50px;
              background: #efeff0;
              transform: translateX(-4px);
            }
          }
          .qrcode {
            font-size: 14px;
            span {
              display: inline-block;
              padding: 2px;
              cursor: pointer;
            }
          }
        }
        .creattime_block {
          margin-top: 12px;
          font-size: 12px;
          color: #999;
        }
      }
    }
    .handle_btn_block {
      margin-top: 20px;
      text-align: right;
    }
    .user_detail_info {
      margin: 20px 0 20px;
      .el-row.detail_row {
        border-bottom: $tableBorder;
        &:first-child {
          border-top: $tableBorder;
        }
        .el-col {
          height: 110px;
          &:not(:last-child) {
            border-right: 1px solid #f0f0f0;
          }
        }
        .full_row {
          display: -webkit-flex; /* Safari */
          display: flex;
          .full_row_left {
            box-sizing: border-box;
            width: 11.11%;
            border-right: 1px solid #f0f0f0;
          }
        }
        .item_title, .item_content {
          display: -webkit-flex; /* Safari */
          display: flex;
          align-items: center;
          box-sizing: border-box;
          padding: 0 20px 0 20px;
        }
      }
    }
  }
</style>
